<template>
    <el-form label-width="80px">

        <el-form-item label="标题">
            <el-input v-model="info.title"></el-input>
        </el-form-item>
        <el-divider></el-divider>

        <el-form-item label="副标题">
            <el-input v-model="info.subtitle"></el-input>
        </el-form-item>
        <el-divider></el-divider>

        <el-form-item label="作者">
            <el-input v-model="info.author"></el-input>
        </el-form-item>
        <el-divider></el-divider>

        <el-form-item label="文章分类">
            <el-cascader v-model="info.category_id" :options="category_list" :props="cascader_props"
                @change="handleCategoryChange"></el-cascader>
        </el-form-item>
        <el-divider></el-divider>

        <el-form-item label="图片">
            <!-- <div id="article-image"></div> -->

            <ImageManager v-model="info.image"></ImageManager>
        </el-form-item>
        <el-divider></el-divider>

        <el-form-item label="发布时间">
            <el-config-provider :locale="zhCn">
                <el-date-picker v-model="info.public_time" type="date" value-format="YYYY-MM-DD" format="YYYY-MM-DD"
                    placeholder="选择日期">
                </el-date-picker>
            </el-config-provider>



        </el-form-item>
        <el-divider></el-divider>
        <el-form-item label="外部链接">
            <div style="width:600px;max-width: 100%">
                <el-input placeholder="不使用外链需清空输入框" v-model="info.out_link">
                    <el-button @click="clear_out_link" slot="append">清空</el-button>
                </el-input>
            </div>

        </el-form-item>

        <el-divider></el-divider>

        <el-form-item label="排序">
            <el-input-number v-model="info.sort_order" :min="0" :max="9999" label="倒叙排列">
            </el-input-number>
        </el-form-item>

        <el-divider></el-divider>

        <el-form-item label="浏览次数">
            <!--                        <div >{{info.viewtimes}}</div>-->
            <el-input-number v-model="info.viewtimes" :min="0" label="倒叙排列">
            </el-input-number>
        </el-form-item>

        <el-form-item label="是否推荐">
            <el-switch v-model="info.is_recommend" :active-value="1" :inactive-value="0"></el-switch>
        </el-form-item>

        <el-divider></el-divider>

        <el-form-item label="内容">

            <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig"
                :mode="mode" />
            <Editor style="width:100%; height: 500px; overflow-y: hidden;" v-model="info.content"
                :defaultConfig="editorConfig" :mode="mode" @onCreated="handleCreated" />
        </el-form-item>

        <!-- <el-form-item>
    <el-button type="primary" @click="do_edit">保存</el-button>
</el-form-item> -->

    </el-form>

    <el-dialog v-model="dialogVisible" title="Tips" width="80%" height="600" :before-close="handleClose">

        <div>
            <textarea style="width:100%" v-model="editor_html_code" name="info_content" id="" cols="30"
                rows="10"></textarea>
            <!-- <textarea style="width:100%" name="info_content" id="" cols="30" rows="10"></textarea> -->
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="dialogVisible = false">
                    确定
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>


<script lang="ts" setup>
import { ref, shallowRef, inject } from 'vue';
import axios from 'axios';
import { useRoute, useRouter } from 'vue-router';
import { ElMessage, ElConfigProvider, ElMessageBox } from 'element-plus';

// import { zhCn } from 'element-plus/es/locale';
import zhCn from 'element-plus/lib/locale/lang/zh-cn';

import ImageManager from '../../../Common/image-manager.vue';


import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'

const VITE_URL = window.VITE_URL;
const route = useRoute();
const router = useRouter();
const category_list:any = inject('category_list')
// const category_list: any = ref<Array<object>>()


const mode: any = 'default'
const editorRef: any = shallowRef() // 编辑器实例， 下面 handleCreated 会给赋值
const handleCreated = (editor: any) => {
    editorRef.value = editor // 记录 editor 实例，重要！
    //     const allMenuKeys = editor.getAllMenuKeys()
    //     console.log( allMenuKeys )

}
const token = localStorage.getItem('token');
const toolbarConfig: any = {}
const editorConfig: any = {
    placeholder: '请输入内容...',

    MENU_CONF: {
        uploadVideo: {
            server: VITE_URL + '/admin.FileUpload/wang_editor_upload',
            // form-data fieldName ，默认值 'wangeditor-uploaded-video'
            fieldName: 'file',

            // 单个文件的最大体积限制，默认为 10M
            maxFileSize: 5 * 1024 * 1024, // 5M

            // 最多可上传几个文件，默认为 5
            maxNumberOfFiles: 3,

            // 选择文件时的类型限制，默认为 ['video/*'] 。如不想限制，则设置为 []
            allowedFileTypes: ['video/*'],

            // 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。
            meta: {
                token: token,
                otherKey: ''
            },

            // 将 meta 拼接到 url 参数中，默认 false
            metaWithUrl: false,

            // 自定义增加 http  header
            // headers: {
            //     Accept: 'text/x-json',
            //     otherKey: 'xxx'
            // },

            // 跨域是否传递 cookie ，默认为 false
            // withCredentials: true,

            // 超时时间，默认为 30 秒
            timeout: 15 * 1000, // 15 秒

            // 视频不支持 base64 格式插入
        },
        uploadImage: {
            server: VITE_URL + '/admin.FileUpload/wang_editor_upload',
            // form-data fieldName ，默认值 'wangeditor-uploaded-image'
            fieldName: 'file',

            // 单个文件的最大体积限制，默认为 2M
            maxFileSize: 1 * 1024 * 1024, // 1M

            // 最多可上传几个文件，默认为 100
            maxNumberOfFiles: 10,

            // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
            allowedFileTypes: ['image/*'],

            // 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。
            meta: {
                token: token,
                otherKey: ''
            },

            // 将 meta 拼接到 url 参数中，默认 false
            metaWithUrl: false,

            // 自定义增加 http  header
            // headers: {
            //     Accept: 'text/x-json',
            //     otherKey: 'xxx'
            // },

            // 跨域是否传递 cookie ，默认为 false
            // withCredentials: true,

            // 超时时间，默认为 10 秒
            timeout: 5 * 1000, // 5 秒
        }

    }
}
const info:any = inject('info')
// const info: any = ref<object>({

//     id: 3,
//     author: "",
//     category_id: 0,
//     content: "",
//     image: "",
//     is_recommend: 1,
//     out_link: "",
//     public_time: "2023-03-23",
//     sort_order: 2,
//     status: 1,
//     subtitle: "",
//     title: "",
//     uniacid: 8,
//     viewtimes: 55,
//     updated_at: "",
//     created_at: "2022-01-03 10:42:04",
// })



const cascader_props: any = ref({
    value: 'id',
    // label: 'name',
    label: 'path_name',
    emitPath: false
    // checkStrictly:true
})

const handleCategoryChange = () => {

}





// init();


const dialogVisible = ref(false)
const handleClose = (done: () => void) => {
    ElMessageBox.confirm('确定关闭对话框?')
        .then(() => {
            // console.log( editor_html_code.value )
            // info.content = editor_html_code.value;
            // editorRef.value.setHtml( editor_html_code.value );
            // editorRef.value.dangerouslyInsertHtml( editor_html_code.value )
            done()
        })
        .catch(() => {
            // catch error
        })
}

const editor_html_code: any = ref<string>('');
const openEditorHtml = () => {
    dialogVisible.value = true;
    editor_html_code.value = editorRef.value.getHtml();
}
const getEditorHtml = () => {


    console.log(editorRef.value.getHtml());
}

const setEditorHtml = () => {


    // console.log(editorRef.value.getHtml());
}
</script>